<template>
  <div class="execution">
    <basic-container>
      <div class="header">
        <span class="header__title">{{name}}</span>
        <el-button class="header__btn"
                   type="primary"
                   @click="breaks">关闭返回列表
        </el-button>
      </div>
    </basic-container>
    <basic-container>
      <iframe class="iframe" :src="src"></iframe>
    </basic-container>
  </div>
</template>

<script>
import BasicContainer from '@/components/basic-container/index'

export default {
  components: {
    BasicContainer
  },
  data() {
    return {
      id: '',
      name: '',
      //actUrl: 'http://localhost:8081/modeler.html?modelId='
      actUrl: 'static/modeler.html?modelId='
    }
  },
  created() {
    this.id = this.$route.params.id
    this.name = this.$route.query.name
  },
  computed: {
    src() {
      return `${this.actUrl}${this.id}`
    }
  },
  methods: {
    breaks() {
      this.$router.push({path: '/activiti/model'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .execution {
    height: 99%;

    .header {
      position: relative;
      display: flex;
      align-items: center;

      &__title {
        font-size: 22px;
      }

      &__btn {
        position: absolute;
        right: 10px;
      }
    }

    .iframe{
      width: 100%;
      height: auto;
      min-height: 700px;
      border: 0;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
</style>
